import React from 'react'
import { Route } from 'react-router-dom'
import Index from './Index/index'
import House from './House'
import News from './News'
import Profile from './Profile'
import './index.scss'
import { TabBar } from 'antd-mobile'

const tabs = [
  { title: '首页', icon: 'icon-ind', path: '/home' },
  { title: '找房', icon: 'icon-findHouse', path: '/home/house' },
  { title: '资讯', icon: 'icon-infom', path: '/home/news' },
  { title: '我的', icon: 'icon-my', path: '/home/profile' },
]

class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      // 默认选中的 tab, 动态配置的高亮
      selectedTab: this.props.location.pathname,
    }
  }
  // 更新阶段
  componentDidUpdate(prevProps, prevState) {
    // 虽然Home组件, 没有被销毁掉, 是直接更新的, 但是会触发更新阶段
    // 当地址变化时, Home的组件更新了, 需要同步下selectedTab
    // console.log(prevProps.location.pathname) // 更新前的props
    // console.log(this.props.location.pathname) // 更新后的props
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname,
      })
    }
  }
  render() {
    return (
      <div className="home">
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/house" component={House}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/profile" component={Profile}></Route>

        {/* 渲染导航 */}
        <div className="tabBar">
          <TabBar
            unselectedTintColor="#888"
            tintColor="#21b97a"
            barTintColor="white"
          >
            {tabs.map((item) => (
              <TabBar.Item
                title={item.title}
                key={item.title}
                icon={<i className={`iconfont ${item.icon}`}></i>}
                selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
                selected={this.state.selectedTab === item.path}
                onPress={() => {
                  this.props.history.push(item.path)
                }}
              ></TabBar.Item>
            ))}
          </TabBar>
        </div>
      </div>
    )
  }
}

export default Home
